$primairyFontColor: #efefef;

html{
  
  background: -moz-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #241d33), color-stop(51%, #171930), color-stop(100%, #091119)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%); /* IE10+ */
  background: linear-gradient(to bottom, #241d33 0%, #171930 51%, #091119 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#241d33', endColorstr='#091119', GradientType=0); /* IE6-9 */
  
   
  height: 100%;
  overflow:hidden;
}

body{
  height:100%;
}


#new-year {
  
  position: relative;
  top: 50%;
  width: 90%;
  height: 90%;
  margin: 0 auto 0 auto;
  transform: translateY(-50%);

  
  svg{
    width: 100%;
    height:100%;
  }

}

.stroke-fill {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke: $primairyFontColor;
}

#happy-stroke {
  animation: happy-dash 1.7s linear normal forwards;
}
$newYearDelay: 1.8s;
#n-stroke {
  animation: dash 2s $newYearDelay linear normal forwards;
}
#ew-stroke {
  animation: dash 2s (.7s+$newYearDelay) linear normal forwards;
}
#y-stroke{
  animation: dash 2s (1.5s+$newYearDelay) linear normal forwards;
}
#ye-stroke{
  animation: dash 1s (2.2s+$newYearDelay) linear normal forwards;
}
#ear-stroke{
  animation: dash 2s (2.38s+$newYearDelay) linear normal forwards;
}
#underline-stroke{
  animation: dash .5s (3.7s+$newYearDelay) cubic-bezier(0.550, 0.085, 0.680, 0.530) normal forwards;
}
@keyframes dash {
  0% { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

// Tweaked the exact timings of when the stroke enters the masked areas.
@keyframes happy-dash {
  //H
  0% { stroke-dashoffset: 1000; }
  6% { stroke-dashoffset: 976; }
  6.01% { stroke-dashoffset: 958; }
  13% { stroke-dashoffset: 936; }
  13.01% { stroke-dashoffset: 905; }
  20% { stroke-dashoffset: 896; }
  //A
  20.01% { stroke-dashoffset: 864; }
  27% { stroke-dashoffset: 840; }
  27.01% { stroke-dashoffset: 830; }
  34% { stroke-dashoffset: 808; }
  34.01% { stroke-dashoffset: 775; }
  40% { stroke-dashoffset: 764; }
  //P
  40.01% { stroke-dashoffset: 738; }
  60% { stroke-dashoffset: 688; }
  //P
  60.01% { stroke-dashoffset: 658; }
  80% { stroke-dashoffset: 610; }
  //Y
  80.01% { stroke-dashoffset: 580; }
  90% { stroke-dashoffset: 555; }
  90.01% { stroke-dashoffset: 543; }
  99.99% { stroke-dashoffset: 525; }
  100% { stroke-dashoffset: 0; }
}
